input[type="number"].picker {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type="number"].picker::-webkit-inner-spin-button, input[type="number"].picker::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.number-input {
    text-align: center;
    margin: 1.5em auto;
}

.number-input button.picker {
    -webkit-appearance: none;
    background-color: transparent;
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    position: relative;
}

.number-input button.picker:before, .number-input button.picker:after {
    display: inline-block;
    position: absolute;
    content: '';
    height: 2px;
    transform: translate(-50%, -50%);
}

.number-input button.picker.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type="number"].picker {
    text-align: center;
}

.md-number-input.number-input {
    border: 2px solid #ddd;
    width: 11.8rem;
}

.md-number-input.number-input button.picker {
    outline: none;
    width: 3rem;
    height: 2rem;
    padding-top: .8rem;
}

.md-number-input.number-input button.picker.minus {
    padding-left: 8px;
}

.md-number-input.number-input button.picker.plus {
    padding-left: 2px;
}

.md-number-input.number-input button.picker:before, .md-number-input.number-input button.picker:after {
    width: 1rem;
    background-color: #212121;
}

.md-number-input.number-input input[type="number"].picker {
    max-width: 5rem;
    padding: .5rem;
    border: solid #ddd;
    border-width: 0 2px;
    font-size: 2rem;
    height: 3rem;
    font-weight: bold;
    outline: none;
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color:transparent) {
        .number-input.md-number-input.safari_only button.picker:before, .number-input.md-number-input.safari_only button.picker:after {
            margin-top: -.6rem;
        }
    }
}